/*
 * @Author: 
 * @Date: 2022-02-09 14:42:44
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-14 16:36:34
 * @Description: 请填写简介
 */
import React, { useState, useEffect, useRef, Fragment } from 'react'
import { Select, Button, Space, Input } from 'antd'
import { nanoid } from 'nanoid'
import ReactDOM from 'react-dom'
const { Option } = Select

const btnList = [
  {
    type: 'add',
    title: '+',
    id: nanoid()
  },
  {
    type: 'reduce',
    title: '-',
    id: nanoid()
  },
  {
    type: 'ride',
    title: '*',
    id: nanoid()
  },
  {
    type: 'beside',
    title: '%',
    id: nanoid()
  },
  {
    type: 'odd',
    title: 'increase if odd',
    id: nanoid()
  },
  {
    type: 'async',
    title: 'increase async',
    id: nanoid()
  },
  {
    type: 'clear',
    title: 'clear',
    id: nanoid()
  }
]
const optionMap = [
  { value: 1, id: nanoid(), label: '1' },
  { value: 2, id: nanoid(), label: '2' },
  { value: 3, id: nanoid(), label: '3' },
]
export default function Calculate(props) {
  const [count, setCount] = useState(0)
  const [selectNum, setSelectNum] = useState(0)
  const [timer, setTimer] = useState(null)
  const countData = useRef()

  useEffect(() => {
    setTimer(() => {
      return setInterval(() => {
        setCount(count => count + 1)
      }, 1000)
    })
    return () => {
      clearInterval(timer)
    }
  }, [])

  useEffect(() => {
    if (count > 20) clearInterval(timer)
  }, [count])

  const handleChange = (e) => {
    setSelectNum(e)
    // setSelectNum(() => e)
  }

  const handleAction = (val) => {
    if (!selectNum) return
    let num = 0
    switch (val) {
      case 'add':
        num = count + selectNum
        break;
      case 'reduce':
        num = count - selectNum
        break;
      case 'ride':
        num = count * selectNum
        break;
      case 'beside':
        num = count / selectNum
        break;
      case 'odd':
        if (count % 2 !== 0) {
          num = count + selectNum
        }
        break;
      case 'async':
        setTimeout(() => {
          num = count + selectNum
        }, 700)
        break;
      default:
        break;
    }
    setCount(num)
  }
  const handleDel = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  const handleInput = () => {
    console.log(countData.current.state.value)
  }

  return (
    <Fragment key={1}>
      <div>当前值为：{count}</div>
      <Input className='mb10' ref={countData} placeholder="test" type="text" />
      <div className='mb10'>
        <Space style={{ display: 'flex', flexWrap: 'wrap' }}>
          <Select style={{ minWidth: 120 }} onChange={handleChange} placeholder='select'>
            {
              optionMap.map(it => {
                return <Option key={it.id} value={it.value}>{it.label}</Option>
              })
            }
          </Select>
          {
            btnList.map(it => {
              if (it.type === 'clear') {
                return <Button key={it.id} onClick={() => setCount(0)}>{it.title}</Button>
              } else {
                return <Button key={it.id} onClick={() => handleAction(it.type)}>{it.title}</Button>
              }
            })
          }
        </Space>
      </div>
      <Button className='mr10' onClick={handleDel}>卸载组件</Button>
      <Button onClick={handleInput}>enter</Button>
    </Fragment>
  )
}
